<!-- 热门分类 -->
<template>
  <div class="hot-classification clearfix">
    <div class="you clearfix">
      <div class="fl">
      <div class="like-head"></div>
      </div>
      <div class="fl like-head-text" v-text="indexFloor.gf_name"></div>
      <div class="fl">
      <div class="like-head"></div>
      </div>
    </div>
    <div class="en-name" v-text="indexFloor.en_name"></div>
    <div class="hot-box clearfix" :style="border(indexFloor)">
      <div class="fl hot-type">
        <div class="hot-one" v-for="(items,index) in JSON.parse(indexFloor.wide_goods)" :key="index" :class="{active: index == currentOverIndex}" :style="{'background-color': `#${index == currentOverIndex ? indexFloor.wd_css : indexFloor.gf_css}`}" @mouseover="onMouseEnter(index)">
          <span class="hot-name" v-text="items.name" :style="color(indexFloor, index)"></span><b :style="colr(indexFloor)">></b>
          <div class="hot-content clearfix">
          <div class="hot-items fl" v-for="(item,index) in items.info" :key="index" @click.stop="indexFloorJump(item.type, item.value)">
            <img v-lazy="item.img">
            <div v-text="item.keyword"></div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      indexFloor: {
        type: Object,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        id: 0,
        currentOverIndex: 0
      }
    },
    methods: {
    // 跳转对应页面(商品详情或者搜索页面)
      indexFloorJump(type, id, index) {
        if (index != 0 && index) {
          return
        }
        switch (type) {
          case 'goodsInfo': // 进入商品详情
            window.open('/goods/detail/' + id)
            break
          case 'channel': // 频道
            this.$emit('on-floor-channel', id)
            break
          case 'store': // 进入店铺
            this.intoStore(id)
            break
          case 'link': // 进入链接
            window.open(id.replace('/#', ''))
            break
          case 'goodsList': // 进入商品列表
            sessionStorage.setItem('goodsIds', id)
            window.open('/search/goodsLists')
            break
          case 'storeSearch':
            window.open(`/search/stores?type=stores&st=2&key=${decodeURIComponent(encodeURIComponent(id))}`)
            break
          default:
            if (type == 'brandSearch') {
              window.open(`/search/goods?type=goods&st=3&name=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
            } else {
              window.open(`/search/goods?type=goods&st=1&key=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
            }
        }
      },
      // 进入对应商家店铺
      intoStore(id) {
        window.open('shop/' + id)
      },
      onMouseEnter(index) {
        this.currentOverIndex = index
      },
      // css
      styleCss(indexFloor) {
        return {'border': '2px solid #' + indexFloor.gf_css}
      },
      // 字体颜色
      color(indexFloor, index) {
        if (index != this.currentOverIndex) {
          return
        }
        return {'color': '#' + indexFloor.gf_css}
      },
      // 字体颜色
      colr(indexFloor) {
        return {'color': '#' + indexFloor.gf_css}
      },
      // 背景颜色
      background(indexFloor) {
        return {'background': '#' + indexFloor.gf_css}
      },
      // 边框颜色
      border(indexFloor) {
        return {'border': '1px solid #' + indexFloor.gf_css}
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
